﻿{extends file="../home.html"}

{block name="title"}{$head_title}{/block}
	
{block name="css"}
<!--样式-->  
<link rel="stylesheet" href="__PUBLIC__/Css/front/jquery.mobile-1.4.3.min.css" />
<!--end--> 
<!--导入的js框架--> 
<script type="text/javascript" src="__PUBLIC__/Js/front/jquery.circliful.js?version={$version}"></script> 
<script type="text/javascript" src="__PUBLIC__/Js/front/jquery.roundabout.min.js?version={$version}"></script> 
<script type="text/javascript" src="__PUBLIC__/Js/front/jquery.mobile-1.4.3.min.js?version={$version}"></script>
<script type="text/javascript" src="__PUBLIC__/Js/front/control.js?version={$version}"></script>
<!--end--> 
{/block}

{block name="content"}
<script type="text/javascript">
var command_arr = new Array();
{foreach from=$command item=c key=key}
	command_arr[{$key}] = {$c};
{/foreach}

var seed_state_list = new Array();
var current_seed_state_id;
var current_state;
{foreach from=$seed_state_list item=state key=key1}
	seed_state_list[{$key1}] = new Array();
	arr{$state.state} = ['{$state.img_path}', '{$state.img_path}', '{$state.img_path}'];
	{foreach from=$state item=data key=key2}
		seed_state_list[{$key1}]['{$key2}'] = '{$data}';
	{/foreach}
{/foreach}

var alarm = {$planter_info.alarm};
var planter_id = {$planter_info.planter_id};
var seed_id = {$item_info.item_id};
var planter_seed_num = {$planter_seed_num};

{literal}
</script>

<!--select界面的js--> 
<script type="text/javascript">

(function ($) {

    $.fn.circliful = function (options, callback) {

        //$(this).empty();
		var settings = $.extend({
            // These are the defaults.
            fgcolor: "#556b2f",
            bgcolor: "#eee",
            fill: false,
            width: 15,
            outsize:10,
            dimension: 200,
            fontsize: 15,
            percent: 50,
            animationstep: 1.0,
            iconsize: '20px',
            iconcolor: '#999',
            border: 'default',
            complete: null
        }, options);

        return this.each(function () {
            var customSettings = ["fgcolor", "bgcolor", "fill", "width","outsize", "dimension", "fontsize", "animationstep", "endPercent", "icon", "iconcolor", "iconsize", "border"];
            var customSettingsObj = {};
            var icon = '';
            var endPercent = 0;
            var obj = $(this);
            var fill = false;
            var text, info;
            obj.addClass('circliful');
            obj.empty();

            checkDataAttributes(obj);

            if (obj.data('text') != undefined) {
				obj.data('text',$(obj).attr('data-text'));
                text = obj.data('text');
                if (obj.data('icon') != undefined) {
					obj.data('icon',$(obj).attr('data-icon'));
                    icon = $('<i></i>')
                        .addClass('fa ' + $(this).data('icon'))
                        .css({
                            'color': customSettingsObj.iconcolor,
                            'font-size': customSettingsObj.iconsize
                        });
                }

                if (obj.data('type') != undefined) {
					obj.data('type',$(obj).attr('data-type'));
                    type = $(this).data('type');
                    
                    if (type == 'half') {
                        addCircleText(obj, 'circle-text-half', (customSettingsObj.dimension / 1.45));
                    } else {
                        addCircleText(obj, 'circle-text', customSettingsObj.dimension);
                    }
                } else {
                    addCircleText(obj, 'circle-text', customSettingsObj.dimension);
                }
            }

            if ($(this).data("total") != undefined && $(this).data("part") != undefined) {
                var total = $(this).data("total") / 100;
                obj.data('part',$(obj).attr('data-part'));
				//alert(obj.data('part'));
                percent = (($(this).data("part") / total) / 100).toFixed(3);
                endPercent = ($(this).data("part") / total).toFixed(3)
            } else {
                if ($(this).data("percent") != undefined) {
                    percent = $(this).data("percent") / 100;
                    endPercent = $(this).data("percent")
                } else {
                    percent = settings.percent / 100
                }
            }

            if ($(this).data('info') != undefined) {
				obj.data('info',$(obj).attr('data-info'));
                info = $(this).data('info');

                if ($(this).data('type') != undefined) {
                    type = $(this).data('type');

                    if (type == 'half') {
                        addInfoText(obj, 0.9);
                    } else {
                        addInfoText(obj, 1.25);
                    }
                } else {
                    addInfoText(obj, 1.25);
                }
            }

            $(this).width(customSettingsObj.dimension + 'px');

            var canvas = $('<canvas></canvas>').attr({
			                width: customSettingsObj.dimension,
			                height: customSettingsObj.dimension
			            }).appendTo($(this)).get(0);

            var context = canvas.getContext('2d');
            var x = canvas.width / 2;
            var y = canvas.height / 2;
            var degrees = customSettingsObj.percent * 360.0;
            var radians = degrees * (Math.PI / 180);
            var radius = canvas.width / 2.5;
            var startAngle = 2.3 * Math.PI;
            var endAngle = 0;
            var counterClockwise = false;
            var curPerc = customSettingsObj.animationstep === 0.0 ? endPercent : 0.0;
            var curStep = Math.max(customSettingsObj.animationstep, 0.0);
            var circ = Math.PI * 2;
            var quart = Math.PI / 2;
            var type = '';
            var fireCallback = true;

            if ($(this).data('type') != undefined) {
                type = $(this).data('type');

                if (type == 'half') {
                    startAngle = 2.0 * Math.PI;
                    endAngle = 3.13;
                    circ = Math.PI * 1.0;
                    quart = Math.PI / 0.996;
                }
            }

            /**
             * adds text to circle
             * 
             * @param obj
             * @param cssClass
             * @param lineHeight
             */
            function addCircleText(obj, cssClass, lineHeight) {
                $("<span></span>")
                    .appendTo(obj)
                    .addClass(cssClass)
                    .text(text)
                    .prepend(icon)
                    .css({
                        'line-height': lineHeight + 'px',
                        'font-size': customSettingsObj.fontsize + 'px'
                    });
            }

            /**
             * adds info text to circle
             * 
             * @param obj
             * @param factor
             */
            function addInfoText(obj, factor) {
                $('<span></span>')
                    .appendTo(obj)
					.text(info)
                    .addClass('circle-info-half')
                    .css(
                    'line-height', (customSettingsObj.dimension * factor) + 'px'
                );
            }

            /**
             * checks which data attributes are defined
             * @param obj
             */
            function checkDataAttributes(obj) {
                $.each(customSettings, function (index, attribute) {
                    if (obj.data(attribute) != undefined) {

                        customSettingsObj[attribute] = obj.data(attribute);
						
                    } else {
                        customSettingsObj[attribute] = $(settings).attr(attribute);
                    }

                    if (attribute == 'fill' && obj.data('fill') != undefined) {
                        fill = true;
                    } 
                });
            }

            /**
             * animate foreground circle
             * @param current
             */
            function animate(current) {
                context.clearRect(0, 0, canvas.width, canvas.height);

                context.beginPath();
                context.arc(x, y, radius, endAngle, startAngle, false);

                context.lineWidth = customSettingsObj.width + 1;
                
                context.strokeStyle = customSettingsObj.bgcolor;
                context.stroke();
                
                context.lineWidth = customSettingsObj.outsize;

                if (fill) {
                    context.fillStyle = customSettingsObj.fill;
                    context.fill();
                }

                context.beginPath();
                context.arc(x, y, radius+1, -(quart), ((circ) * current) - quart, false);

                if (customSettingsObj.border == 'outline') {
                	context.lineWidth = customSettingsObj.width + 13;
                } else if(customSettingsObj.border == 'inline') {
                	context.lineWidth = customSettingsObj.width - 13;
                } 

                context.strokeStyle = customSettingsObj.fgcolor;
                context.stroke();

                if (curPerc < endPercent) {
                    curPerc += curStep;
if ( !window.requestAnimationFrame ) {

	window.requestAnimationFrame = ( function() {

		return window.webkitRequestAnimationFrame ||
		window.mozRequestAnimationFrame ||
		window.oRequestAnimationFrame ||
		window.msRequestAnimationFrame ||
		function( /* function FrameRequestCallback */ callback, /* DOMElement Element */ element ) {

			window.setTimeout( callback, 1000 / 60 );

		};

	} )();

}
else
{
                    requestAnimationFrame(function () {
                        animate(Math.min(curPerc, endPercent) / 100);
                    }, obj);
                }
}

                if(curPerc == endPercent && fireCallback && typeof(options) != "undefined") {
                	if($.isFunction( options.complete )) {
		            	options.complete();

		            	fireCallback = false;
		            }
                }
            }

            animate(curPerc / 100);

        });
    };
}(jQuery));


var select_init_is_over=false;
$(document).on("pageinit","#select",function()
{
	if(!select_init_is_over)
	{
		select_init();
	}
});

function select_init()
{
	select_fillstat();
	var clientWidth = document.body.clientWidth;
	if(clientWidth >= 540)
	{
		select_setDivs_pad();
	}
	else
	{
		select_setDivs();
	}
}

function select_fillstat()
{
	$('#myStat_select1').circliful();
	$('#myStat_select1').circliful();
	$('#myStat_select2').circliful();
	$('#myStat_select3').circliful();
}

function select_setDivs()//手机布局
{	
	var dotLeft = $("#img_lb_div_select").offset().left-23+($("#img_lb_div_select").width()-$(".dot_select").width())/2;
	//中心点纵坐标
	//var dotTop = $("#img_lb_div_select").offset().top-20+($("#img_lb_div_select").height()-$(".dot_select").height())/2;
	var dotTop=55;

	//起始角度
	var stard = 0;
	//半径
	var radius = 105;
	//每一个BOX对应的角度;
	var avd = 360/$(".d_jd_select").length;
	//每一个BOX对应的弧度;
	var ahd = avd*Math.PI/180;

	//设置圆的中心点的位置
	$(".dot_select").css({"left":dotLeft,"top":dotTop});	
	$(".d_jd_select").each(function(index, element){
		index = (seed_state_list.length + 1) - index;
		$(this).css({"left":Math.sin((ahd*index))*radius+dotLeft,"top":Math.cos((ahd*index))*radius+dotTop});
	});
}

function select_setDivs_pad()//pad布局
{
	var dotLeft = $("#img_lb_div_select").offset().left-40+($("#img_lb_div_select").width()-$(".dot_select").width())/2;
	//中心点纵坐标
	//var dotTop = $("#img_lb_div_select").offset().top-20+($("#img_lb_div_select").height()-$(".dot_select").height())/2;
	var dotTop=160;

	//起始角度
	var stard = 0;
	//半径
	var radius = 245;
	//每一个BOX对应的角度;
	var avd = 360/$(".d_jd_select").length;
	//每一个BOX对应的弧度;
	var ahd = avd*Math.PI/180;

	//设置圆的中心点的位置
	$(".dot_select").css({"left":dotLeft,"top":dotTop});
	$(".d_jd_select").each(function(index, element){
		index = (seed_state_list.length + 1) - index;
	$(this).css({"left":Math.sin((ahd*index))*radius+dotLeft,"top":Math.cos((ahd*index))*radius+dotTop});
	});
}

var select_plant_num=1;//被选中的阶段

function select_beTouch(obj)
{
	//清除被选择的状态
	select_reSetAllImg();
	var url=$(obj).attr('src').split(".");
	var newurl='';
	var t=$(obj).attr('src').split('selected'); 

	var num=$(obj).parent().attr('value');//取得哪个阶段
	if(t.length>1)
	{
	}
	else
	{ 
		//各种阶段被选中时的代码
		newurl=url[0]+'_selected.png';
		$(obj).attr('src',newurl);
		$('#select_p').html($('#jd_img'+num+'_select').prev().html());	
	}

	select_plant_num=num;
	var t=5;
	var d=5;
	var l=5;

	len = seed_state_list.length;
	for (var j = 0; j < len; j++)
	{
		if (seed_state_list[j]['state'] == num)
		{
			current_seed_state_id = seed_state_list[j]['seed_state_id'];
			current_state = num;
			t = seed_state_list[j]['outside_temperature'];
			d = seed_state_list[j]['humidity'];
			l = seed_state_list[j]['illuminance_limit'];
		}
	}

	$('#myStat_select1').attr('data-part',t);
	$('#myStat_select1').attr('data-text',t+'℃');
	$('#myStat_select2').attr('data-part',d);
	$('#myStat_select2').attr('data-text',d+'%');
	$('#myStat_select3').attr('data-part',parseFloat(l) / 10);
	$('#myStat_select3').attr('data-text',l+'Lux');
	select_fillstat();	 
}

//取消其他阶段的选中情况
function select_reSetAllImg()
{
	//var imgs=$('.plant_img');
	$('.plant_img_select').each(function(){
		var url=$(this).attr('src').replace('_selected',"");
		$(this).attr('src',url);
	});
}

function select_startPlaneNum()
{
	if (current_seed_state_id == undefined)
	{
		alert('请选择一个状态！');
		return false;
	}

	//提示确认
	if (planter_seed_num == 0 || (confirm('开始后当前种植机内之前已种植的植物会受到影响，您确定要开始吗？')))
	{
		//种植该种子
		plant_new_seed(planter_id, seed_id, current_seed_state_id, current_state);
	}
	else
	{
		return false;
	}

	//var num=select_plant_num;
	//home_sel_plant(num);
	//isend=false;
	//isfinal=false;
}
</script>
{/literal}
<!--select界面的css--> 
<style type="text/css">

.dot_select
	 { 
	 position:absolute;
	 width:0px;
	 height:0px;
	 }

.plant_img_select
    {
        width:100%;
		height:100%;
	}
.stat{
	   float:left;
	}

</style>
</head>

<body>
<!--select页面-->
<div data-role="page" id="select"> 
	{include file="$header_path"}

	<div data-role="content" id="select_content" style='margin:0px auto;'>
		<!--植物标题-->
		<div class="text-center">
			<p class="main_plant_name">{$item_info.item_name}</p>
			<p class="main_plant_desc">这是{$item_info.item_name}种植的一个详细过程</p>
		</div>

		<!--植物各个阶段-->
		<div id='img_lb_div_select'>
			<div id='plant_m_select'>
			<div id='select_info'>
			<p id='select_p'>点击每个种植阶段，查看种植信息</p>
		</div>

		<div class="dot_select"></div>
		<div class='d_jd_select'></div>
		{foreach from=$seed_state_list item=state}
			{if $state.state == 9}
				<div id='jd9_select' value='9' class='d_jd_select'><span style='display:none;'>种子形成期：植物器官脱落，成熟种子落回土壤</span><img id='jd_img9_select' onclick='select_beTouch(this)' class='plant_img_select' src='__PUBLIC__/Images/front/phase9.png'></img></div>
			{elseif $state.state == 8}
				<div id='jd8_select' value='8' class='d_jd_select'><span style='display:none;'>结果期：果实经过生化转变，色香味变得香甜</span><img id='jd_img8_select' onclick='select_beTouch(this)' class='plant_img_select' src='__PUBLIC__/Images/front/phase8.png'></img></div>
			{elseif $state.state == 7}
				<div id='jd7_select' value='7' class='d_jd_select'><span style='display:none;'>传粉期：成熟的花粉落在雌蕊柱头受精</span><img id='jd_img7_select' onclick='select_beTouch(this)' class='plant_img_select' src='__PUBLIC__/Images/front/phase7.png'></img></div>
			{elseif $state.state == 6}
				<div id='jd6_select' value='6' class='d_jd_select'><span style='display:none;'>开花期：花瓣打开，在激素作用下花粉成熟</span><img id='jd_img6_select' onclick='select_beTouch(this)' class='plant_img_select' src='__PUBLIC__/Images/front/phase6.png'></img></div>
			{elseif $state.state == 5}
				<div id='jd5_select' value='5' class='d_jd_select'><span style='display:none;'>花芽期：花芽分化、花器官形成和性别分化</span><img id='jd_img5_select' onclick='select_beTouch(this)' class='plant_img_select' src='__PUBLIC__/Images/front/phase5.png'></img></div>
			{elseif $state.state == 4}
				<div id='jd4_select' value='4' class='d_jd_select'><span style='display:none;'>根茎叶期：光合作用帮助根茎叶快速生长</span><img id='jd_img4_select' onclick='select_beTouch(this)' class='plant_img_select' src='__PUBLIC__/Images/front/phase4.png'></img></div>
			{elseif $state.state == 3}
				<div id='jd3_select' value='3' class='d_jd_select'><span style='display:none;'>幼苗期：在光的作用下，嫩芽显绿色</span><img id='jd_img3_select' onclick='select_beTouch(this)' class='plant_img_select' src='__PUBLIC__/Images/front/phase3.png'></img></div>
			{elseif $state.state == 2}
				<div id='jd2_select' value='2' class='d_jd_select'><span style='display:none;'>萌芽期：配合酶的作用种子吸水并萌芽</span><img id='jd_img2_select' onclick='select_beTouch(this)' class='plant_img_select' src='__PUBLIC__/Images/front/phase2.png'></img></div>
			{elseif $state.state == 1}
				<div id='jd1_select' value='1' class='d_jd_select'><span style='display:none;'>种子期：埋于松紧适中土壤中</span><img id='jd_img1_select' onclick='select_beTouch(this)' class='plant_img_select' src='__PUBLIC__/Images/front/phase1.png'></img></div>
			{/if}
		{/foreach}
	</div>
</div>  
<!--select统计图-->
<script>
var screenWidth = document.body.clientWidth;
if(screenWidth >= 540)
{
	document.write('<div id="stats_select" class="stats_select"><div class="stat" id="myStat_select1" data-dimension="150" data-text="{$planter_info.outside_temperature}℃"  data-width="5" data-outsize="5" data-fontsize="28" data-percent="100" data-fgcolor="#f00" data-bgcolor="#f8f8f8" data-fill="#fff" data-total="100" data-part="{$planter_info.outside_temperature}" data-icon="star-black" data-icon-size="28" data-icon-color="#fff"><\/div><div class="stat" id="myStat_select2" data-dimension="150" data-text="{$planter_info.humidity}%"  data-width="5" data-outsize="5" data-fontsize="28" data-percent="100" data-fgcolor="#00A2E9" data-bgcolor="#f8f8f8" data-fill="#fff" data-total="100" data-part="{$planter_info.humidity}" data-icon="star-black" data-icon-size="28" data-icon-color="#fff"><\/div><div class="stat" id="myStat_select3" data-dimension="150" data-text="{$planter_info.illuminance}Lux"  data-width="5" data-outsize="5" data-fontsize="28" data-percent="100" data-fgcolor="#FF9630" data-bgcolor="#f8f8f8" data-fill="#fff" data-total="100" data-part="{$planter_info.illuminance / 10}" data-icon="star-black" data-icon-size="28" data-icon-color="#fff"><\/div><div style="clear:both;"><\/div><\/div>');
}
else
{
	document.write('<div id="stats_select" class="stats_select"><div class="stat" id="myStat_select1" data-dimension="80" data-text="{$planter_info.outside_temperature}℃"  data-width="2" data-outsize="2" data-fontsize="17" data-percent="100" data-fgcolor="#f00" data-bgcolor="#f8f8f8" data-fill="#fff" data-total="100" data-part="{$planter_info.outside_temperature}" data-icon="star-black" data-icon-size="28" data-icon-color="#fff"><\/div><div class="stat" id="myStat_select2" data-dimension="80" data-text="{$planter_info.humidity}%"  data-width="2" data-outsize="2" data-fontsize="17" data-percent="100" data-fgcolor="#00A2E9" data-bgcolor="#f8f8f8" data-fill="#fff" data-total="100" data-part="{$planter_info.humidity}" data-icon="star-black" data-icon-size="28" data-icon-color="#fff"><\/div><div class="stat" id="myStat_select3" data-dimension="80" data-text="{$planter_info.illuminance}Lux"  data-width="2" data-outsize="2" data-fontsize="17" data-percent="100" data-fgcolor="#FF9630" data-bgcolor="#f8f8f8" data-fill="#fff" data-total="100" data-part="{$planter_info.illuminance / 10}" data-icon="star-black" data-icon-size="28" data-icon-color="#fff"><\/div><div style="clear:both;"><\/div><\/div>');
}
</script>
	<!--三个图标-->
	<div class="param_icon">
		<div class="param_icon_temp"></div>
		<div class="param_icon_humit"></div>
		<div class="param_icon_light"></div>
	</div>

	<!--说明文字-->
	<div id='select_info' class="select_info">
		<label id="select_info_txt"><p><span class="bold green01">温度</span>：番茄是喜温性蔬菜，在正常条件下，同化作用最适温度为20～25℃;</p><p><span class="bold green01">光照</span>：番茄是喜光作物，光饱和点为70000lx，适宜光照强度为30000～50000lx;</p><p><span class="bold green01">水分</span>：番茄既需要较多的水分，但又不必经常大量的灌溉，一般以土壤湿度60～80%、空气湿度45～50%为宜。</p></label>
	</div>

	<!--按钮-->
	<div class="select_btn">
		<a href="javascript:;" class="main-btn txt-shd0" style="color:white;font-weight:normal;" onclick='return select_startPlaneNum()' data-prefetch="ture">开<span class="pr10em"></span>始</a>

	<!--底部导航-->
	{include file="./footer.html"}
{/block}
